<template>
  <div class="My-notepad">
    <h1>我的记事本</h1>

    <input
      type="text"
      v-model="msg"
      placeholder="请输入内容"
      @keyup.enter="addMsg"
    /><br />

    <select v-model="selectedFilter" @change="filterItems">
      <option value="all">全部事项</option>

      <option value="unfinished">未完成事项</option>

      <option value="completed">已完成事项</option>

      <option value="canceled">已取消事项</option>
    </select>

    <button @click="clearAll">清空所有</button>

    <div
      v-if="selectedFilter === 'all' || selectedFilter === 'unfinished'"
      class="section"
    >
      <h1>
        未完成事项({{ unfinished.length }})

        <a href="#" @click.prevent="toggleUnfinished">
          <img
            :src="showUnfinished ? openImage : closeImage"
            class="toggle-icon"
          />
        </a>
      </h1>

      <div v-if="showUnfinished">
        <table>
          <tr v-for="(item, index) in unfinished" :key="index">
            <td>{{ item.message }}</td>
            <td><button @click="cancel(item)">取消</button></td>
            <td><button @click="CompletedButton(item)">完成</button></td>
          </tr>
        </table>
      </div>
    </div>

    <div
      v-if="selectedFilter === 'all' || selectedFilter === 'completed'"
      class="section"
    >
      <h1>
        已完成事项({{ Completed.length }})

        <a href="#" @click.prevent="toggleCompleted">
          <img
            :src="showCompleted ? openImage : closeImage"
            class="toggle-icon"
          />
        </a>
      </h1>

      <div v-if="showCompleted">
        <table>
          <tr v-for="(item, index) in Completed" :key="index">
            <td>{{ item.message }}</td>
          </tr>
        </table>
      </div>
    </div>

    <div
      v-if="selectedFilter === 'all' || selectedFilter === 'canceled'"
      class="section"
    >
      <h1>
        已取消事项({{ canceled.length }})

        <a href="#" @click.prevent="toggleCanceled">
          <img
            :src="showCanceled ? openImage : closeImage"
            class="toggle-icon"
          />
        </a>
      </h1>

      <div v-if="showCanceled">
        <table>
          <tr v-for="(item, index) in canceled" :key="index">
            <td>{{ item.message }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  name: "My-notepad",

  data() {
    return {
      unfinished: [],
      Completed: [],
      canceled: [],
      msg: "",
      status: 0,
      openImage:
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.gbi2S7Q7wKEAges3FpJ5MwHaEE?w=337&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      closeImage:
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.uli99exFGku9bw1b1BPSzwHaHa?w=205&h=204&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      showUnfinished: true,
      showCompleted: true,
      showCanceled: true,
      selectedFilter: "all",
    };
  },

  methods: {
    addMsg() {
      this.unfinished.push({ message: this.msg, status1: this.status + 1 });

      this.msg = "";
    },

    CompletedButton(item) {
      this.Completed.push(item);

      this.unfinished.splice(this.unfinished.indexOf(item), 1);
    },

    cancel(item) {
      this.canceled.push(item);

      this.unfinished.splice(this.unfinished.indexOf(item), 1);
    },

    clearAll() {
      this.unfinished = [];

      this.Completed = [];

      this.canceled = [];
    },

    filterItems() {
      this.showUnfinished =
        this.selectedFilter === "all" || this.selectedFilter === "unfinished";

      this.showCompleted =
        this.selectedFilter === "all" || this.selectedFilter === "completed";

      this.showCanceled =
        this.selectedFilter === "all" || this.selectedFilter === "canceled";
    },

    toggleUnfinished() {
      this.showUnfinished = !this.showUnfinished;
    },

    toggleCompleted() {
      this.showCompleted = !this.showCompleted;
    },

    toggleCanceled() {
      this.showCanceled = !this.showCanceled;
    },
  },
};
</script>



<style>
.My-notepad {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Microsoft YaHei", sans-serif;
}

h1 {
  color: #2c3e50;
  font-size: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 2px solid #3498db;
  border-radius: 4px;
  font-size: 16px;
}

select {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

.section {
  background-color: #f9f9f9;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

td:first-child {
  width: 60%;
}

.toggle-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* 不同状态的事项样式 */
tr button:nth-child(1) {
  background-color: #e74c3c;
  margin-right: 5px;
}

tr button:nth-child(2) {
  background-color: #2ecc71;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .my-test {
    padding: 10px;
  }

  td {
    padding: 8px;
  }

  button {
    padding: 6px 12px;
  }
}
</style>